<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
  <!--/* 共用JS与CSS */-->
  <th:block th:replace="~{assets/include :: scriptcss_default('数据字典')}"/>
</head>
<body>
  <div id="app" v-cloak>
    <v-app>
      <!-- 左侧区域::导航菜单 -->
      <th:block th:replace="~{assets/include :: navMenu}"/>

      <!-- 顶部功能区 -->
      <v-app-bar flat>
        <th:block th:replace="~{assets/include :: header}"/>
      </v-app-bar>

      <!-- 主体部分 -->
      <v-main>
        <!-- 主体容器 -->
        <v-container fluid>
          <v-sheet class="rounded-0 px-6 py-3">
            <!-- 查询条件 -->
            <v-form ref="queryForm" class="assist">
              <v-row>
                <v-col cols="12" sm="6" md="3" lg="2">
                  <v-text-field v-model="param.code" hide-details clearable :label="$t('字典Code')"></v-text-field>
                </v-col>
                <v-col cols="12" sm="6" md="3" lg="2">
                  <v-text-field v-model="param.name" hide-details clearable :label="$t('字典名称')"></v-text-field>
                </v-col>
                <v-col class="text-right">
                  <v-btn size="large" color="primary" class="mr-2" @click="doQuery(1)">{{$t('查询')}}</v-btn>
                  <v-btn size="large" variant="outlined" @click="resetQueryForm(1)">{{$t('重置')}}</v-btn>
                </v-col>
              </v-row>
            </v-form>

            <!-- 数据表格 -->
            <v-card-zoom flat class="mt-3">
              <v-data-table-server
                  ref="dataTable"
                  :loading="loading"
                  :headers="datatable.headers"
                  :items="datatable.items"
                  :items-length="datatable.total"
                  item-value="code"
                  mobile-breakpoint="md"
                  fixed-header
                  hover
                  class="pagination v-table-fill-height"
                  :style="{'--ty-assist-height': assistHeight}"
                  :page="pagination.page"
                  v-model:items-per-page="pagination.pageSize"
                  @update:options="doQueryTable"
                >
                  <template #top>
                    <v-row class="assist ma-0">
                      <v-col shiro:hasPermission="/system/dict/save">
                        <v-btn color="primary" class="pr-5 pl-4" @click="openFormDialog('新增数据字典')">
                          <v-icon size="small">mdi-plus</v-icon>
                          {{$t('新增')}}
                        </v-btn>
                      </v-col>
                      <v-col class="text-right" shiro:hasPermission="/system/dict/reload">
                        <v-btn color="primary" variant="text" class="pr-5" @click="reloadDict">{{$t('刷新字典缓存')}}</v-btn>
                      </v-col>
                    </v-row>
                  </template>
                  <template v-slot:item.items="{value}">
                    {{value.length}}
                  </template>
                  <template v-slot:item.operation="{item}">
                    <a class="mr-2" @click="openWinDrawer(item)" shiro:hasPermission="dictView">{{$t('字典项')}}</a>
                    <a class="mr-2" @click="openFormDialog('修改数据字典', item.code, true)" shiro:hasPermission="/system/dict/update">{{$t('修改')}}</a>
                    <v-btn-confirm :data="item.code" @confirm="doDelete" shiro:hasPermission="/system/dict/del"></v-btn-confirm>
                  </template>
                  <template #bottom="{ pageCount, items }">
                    <v-pagination class="assist pagebar" v-model="pagination.page" :total-visible="pagination.vp" :length="pageCount" :disabled="loading"/>
                  </template>
                </v-data-table-server>
            </v-card-zoom>
          </v-sheet>

          <!-- 数据表单模态窗口 -->
          <v-dialog v-model="winDialog" persistent :fullscreen="isMobile" width="800">
            <tform as="v-form" ref="dataForm" class="fill-height" @submit="doSubmit">
              <v-card :loading="posting">
                <v-toolbar color="indigo" :title="$t(dialogTitle)">
                  <v-btn icon="mdi-close" @click="closeFormDialog"></v-btn>
                </v-toolbar>
                <v-card-text class="overflow-auto">
                  <!-- 数据表单 -->
                  <tfield v-model.trim="formData.code" name="字典Code" v-slot="{ field, errors }" rules="required|alpha_dash|max:20">
                    <v-text-field v-bind="field" :model-value="field.value" clearable v-blank type="text" :error-messages="errors" :label="$t('字典Code')" class="mt-1"></v-text-field>
                  </tfield>
                  <tfield v-model.trim="formData.name" name="字典名称" v-slot="{ field, errors }" rules="required|max:30">
                    <v-text-field v-bind="field" :model-value="field.value" clearable v-blank type="text" :error-messages="errors" :label="$t('字典名称')" class="mt-1"></v-text-field>
                  </tfield>
                </v-card-text>
                <v-divider></v-divider>
                <v-card-actions>
                  <v-btn size="large" variant="elevated" color="primary" type="submit" :loading="posting">{{$t('保存')}}</v-btn>
                </v-card-actions>
              </v-card>
            </tform>
          </v-dialog>

          <!-- 权限标识 -->
          <span ref="updatePermis" class="d-none" shiro:hasPermission="/system/dict/update"></span>
          <span ref="delPermis" class="d-none" shiro:hasPermission="/system/dict/del"></span>
          <span ref="dictViewPermis" class="d-none" shiro:hasPermission="dictView"></span>
        </v-container>
      </v-main>

      <!--/* 导入功能权限管理代码片段 */-->
      <th:block th:replace="~{system/dict/dict-item :: items}"/>
    </v-app>
  </div>

  <!-- 导入Vuetify扩展组件 -->
  <th:block th:replace="~{assets/vuetify :: v-card-zoom}"/>
  <th:block th:replace="~{assets/vuetify :: v-btn-confirm}"/>

  <!-- 业务js -->
  <script type="text/javascript" th:src="@{/js/system/dict/dict.js?_t=#buildtime#}"></script>
  <script type="text/javascript">
    // 初始化Vue
    const app = Vue.createApp({
      extends: baseApp,
      mixins: [dictMixin, itemsMixin]
    });
    const appInstance = baseApp.uses(app).mount('#app');
  </script>
</body>
</html>
